<template>
    <div style="padding: 20px 10px;">
        <div class="svgImgContent" @click="svgImgurlFlag=false" v-if="svgImgurlFlag">
            <img class="svgImg"   :src="svgImgurl" alt="">
        </div>
        <el-row style="margin-bottom:10px;">
            <el-col :span="24">
            <el-button type="primary" @click="dialogVisible = true">流程部署</el-button>
            </el-col>
        </el-row>
        <div class="timing">
            <!-- 表格 -->
            <admincentertb ref="httbRef" width="250" :btn-is-show="btnIsShow" :table-col="tabUserList" :table-data="tableUserData1">
                <template v-slot:autoBtn="slotProps">
                    <el-button slot="autoBtn" type="text" @click="showImage(slotProps.data)">预览图片</el-button>
                    <el-button slot="autoBtn" type="text" @click="editXmlFun(slotProps.data)">编辑流程</el-button>
                </template>
            </admincentertb>
            <div ref="canvas" style="opacity: 0;width: 0;height: 0;"></div>
            <!-- 分页 -->
            <div style="text-align:right;margin-top:10px;">
                <el-pagination
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
            </div>
            </div>
            <el-dialog
                title="流程部署"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="40%"
                >
                    <div class="flowArrange">
                    <div class="content">
                    <!-- <span>【 流 程 部 署 】</span> -->
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                        <el-form-item label="事项名称" prop="deployName">
                            <el-input v-model="ruleForm.deployName"></el-input>
                        </el-form-item>
                        <el-form-item label="绑定表单" prop="externalParameterId">
                            <el-select v-model="ruleForm.externalParameterId" placeholder="请选择">
                                <el-option v-for="(item,index) in tableUserData" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="流程文件" class="jkupload" style="width: 100%;">
                            <span class="xingspan" style="color:red">*</span>
                            <input ref="upload" style="width: 100%;" type="file" @change="getuploadefile">
                            <el-button style="width: 100%;">上传文件</el-button>
                            <span class="fileName">{{ fileName }}</span>
                            <p v-if="showuploadfile">请先上传文件</p>
                        </el-form-item>
                        <el-form-item>
                            <div class="btns">
                                <el-button type="primary" @click="submitForm('ruleForm')">立即部署</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    </div>
                </div>
            </el-dialog>
    </div>
</template>
  <script>
    import { getToken } from '@/utils/auth'
    import request from '@/utils/request'
    import { activitideploy} from '@/api/home_/adminCenter'
    import BpmnModeler from 'bpmn-js/lib/Modeler'

    import { activitigetDeployList} from '@/api/home_/adminCenter'
    export default {
      data() {
        var validatePass = (rule, value, callback) => {
            if(this.fileName==''){
                callback(new Error('请上传文件'));
            }else{
                callback();
            }
        };
        return {
            dialogVisible:false,
            svgImgurlFlag:false,
            svgImgurl:"",
            bpmnModeler:null,
            tableUserData1: [],
            tabUserList: [
          {
            key: 'deployName',
            title: '事项名称'
          },
          {
            key: 'formName',
            title: '表单标识'
          },
          {
            key: 'definitionKey',
            title: '事项标识'
          },
          {
            key: 'createTime',
            title: '创建时间'
          }
        ],
            total: 0,
            size: 10,
            page: 1,
            btnIsShow: {
                operate: true,
                detile: false,
                example:false,
                outParamsBind:false,
                update:false,
                del: false
            },
            showuploadfile:false,
            fileName:"",
            file:null,
            httpUrl: process.env.VUE_APP_BASE_API,
            headers: {
                Authorization: 'bearer ' + getToken()
            },
            tableUserData:[],
            fileList: [],
            ruleForm: {
                deployName: '',
                file: '',
                externalParameterId: ''
            },
            rules: {
                deployName: [
                    { required: true, message: '请输入事项名称', trigger: 'change' }
                ],
                file: [
                    // { required: true,validator:validatePass,trigger: 'change' }
                    { required: true }

                ],
                externalParameterId: [
                    { required: true, message: '请选择绑定表单', trigger: 'change' }
                ],
            }
        };
      },
      mounted(){
        
        this.getUserList()
        this.$nextTick(res=>{
            const canvas = this.$refs.canvas
            this.bpmnModeler = new BpmnModeler({container: canvas})

            request({
                url: '/ht-bpmn/externalParameterEntity/page?pageIndex=1&pageSize=1000',
                method: 'get'
            }).then(res => {
                if (res.code == 200) {
                    this.tableUserData = res.data.records
                }
            })
        })
      },
      methods: {
        editXmlFun(v){
            request({
                url: '/ht-bpmn/activiti/getDeploymentFlowChart?definitionKey='+v.definitionKey,
                method: 'post'
            }).then(res => {
                this.$router.push({path:"/adminCenter/flowpath/lcdesing",query:{xml:res}})
            })
        },
        showImage(v){
            request({
                url: '/ht-bpmn/activiti/getDeploymentFlowChart?definitionKey='+v.definitionKey,
                method: 'post'
            }).then(res => {
               this.bpmnModeler.importXML(res, (err) => {
                    if (err) {
                    console.error(err)
                    } else {
                        this.bpmnModeler.saveSVG({ format: true }, (err, xml)=> {
                            let srcVal = window.btoa(unescape(encodeURIComponent(xml)))
                            this.svgImgurl = "data:image/svg+xml;base64," + srcVal 
                            this.svgImgurlFlag = true
                        });
                    }
                })
            })
           
        },
        handleSizeChange(v) {
            this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        },
        getUserList() {
            // this.$refs.httbRef.isShowLoading(true)
            activitigetDeployList({
                'page': this.page,
                'limit': this.size
            }).then(res => {
                this.tableUserData1 = res.data.deploymentList
                this.total = Number(res.data.total)
                // this.$refs.httbRef.isShowLoading(false)
            })
        },
        getuploadefile(){
            this.fileName = this.$refs.upload.files[0].name
            this.formDataInput()
        },
        formDataInput(){
            if(this.fileName.length==0){
                this.showuploadfile = true
            }else{
                this.showuploadfile = false
            }
        },
        submitForm(formName) {
            this.formDataInput()
            let files = this.$refs.upload.files[0];
            const formData = new FormData();
            formData.append('file', files);
            // this.ruleForm.file = formData
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    activitideploy(formData,this.ruleForm).then(res=>{
                        if(res.code==200){
                            this.resetForm(formName)
                            this.dialogVisible = false
                            this.$message.success(res.msg)
                        }else{
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
          this.showuploadfile = false
          this.$refs.upload.value='';
          this.fileName = ''
          this.$refs[formName].resetFields();
        }
      }
    }
  </script>

<style lang="scss" scoped>
  .svgImgContent{
    z-index: 9999;
    position: fixed;
    left:0px;
    top:0px;
    width: 100%;
    background: rgba(0,0,0,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* 设置容器的高度，可以根据实际情况调整 */
    img{
      padding: 20px;
      background: #fff;
      width:50%;
      height:50%;
    }
  }
.btns{
    text-align: left;margin-top:10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 10px;
    .el-button{
        width: 48%;
    }
    
}
>>>.el-form-item__label{
    font-weight: normal;
}
.content{
    border: 1px solid #dcdfe6;
    padding:50px 20px;
    border-radius: 4px;
    position: relative;
    margin: 10px 20px;
    // background: #f2f5f8;
    >span{
        position: absolute;
        top: -22px;
        left: 20px;
        background: #fff;
        padding: 10px;
        font-weight: bold;
    }
}
.fileName{
   display: block;
   display: block;
   position: absolute;
   top: 30px;
   white-space: nowrap;
}
>>>.el-form-item__content{
    position: relative;
    >p{
        position: absolute;
        top: 34px;
        color: #ff4949;
        font-size: 12px;
        line-height: 1;
        left: 0;
    }
}
 .flowArrange{
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    width:100%;
    // margin: 0 auto;
    // margin-top: 100px;
    
    .jkupload{
        position: relative;
        .xingspan{
            position: absolute;
            left: -77px;
            top:3px;
        }
        .el-button{
            position: absolute;
            left: 0px;
            z-index: 0;
        }
    }
    input[type=file] {
        opacity: 0;
        z-index: 100;
        position: absolute;
        left: 0;
        cursor: pointer;
        width: 80px;
        border:1px solid red;
    }
    label {
        display: inline-block;
        background-color: #007bff; /*设置背景色*/
        color: #fff; /*设置字体颜色*/
        padding: 10px 15px; /*设置内边距*/
        border-radius: 5px; /*设置圆角*/
        cursor: pointer; /*将鼠标光标设置为手型*/
    }
 }
.el-input,.el-select{
    // width: 30% !important;
}
 .el-form{
    width:100%;
    .el-select{
        width: 100%;
    }
 }
</style>